<template>
    <div>
        <el-select v-model="class_id" placeholder="请选择" @change="getData">
            <el-option v-for="item in classList" :key="item.id" :label="item.class_name" :value="item.id">
            </el-option>
        </el-select>

        <div class="container" style="border: none;">
            <el-row :gutter="20">
                <el-col :span="2">
                    <el-upload
                        class="upload"
                        action="#"
                        :http-request="handleRequest"
                        list-type="picture-card"
                        :show-file-list="false">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-progress v-show="progressPercent>0" :stroke-width="6" :percentage="progressPercent"></el-progress>
                </el-col>
                <el-col :span="2" v-for="(item,i) in list" :key="i">
                    <div class="img-box" :class="selects.indexOf(item.image_url)>=0 ? 'is-select':''">
                        <el-image style="width: 100px; height: 100px;border:1px solid #f0f0f0" :src="item.image_url"
                            :lazy="true" @click="selectImg(item)" fit="contain">
                        </el-image>
                        <i class="del" @click="handleDel(i,item)">X</i>
                        <p class="name">{{item.image_name || '无'}}</p>
                    </div>
                </el-col>
            </el-row>
            <div style="width: 90%;text-align: right;">
                <el-button v-show="showType!=0 && mult" type="success" @click="sureSelect">确定</el-button>
            </div>

            <div class="pagination">
                <div class="pagination">
                    <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page"
                        :page-sizes="[20, 50, 100, 200]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next"
                        :total="totalNums">
                    </el-pagination>
                </div>
            </div>
        </div>

        <!-- 删除提示框 -->
        <el-dialog title="删除提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button :loading="ifload" type="primary" @click="delData">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script type="text/javascript">
    import {
        uploadUrl
    } from '@/components/js/request'
    export default {
        components: {},
        props: {
            showType: {
                type: Number,
                default: 0, //0页面 1组件引用
            },
            mult: {
                type: Boolean,
                default: true, //true 多张 false 单张
            }
        },
        data() {
            return {
                ifload: true,
                page: 1,
                pageSize: 20,
                totalNums: 0,
                pages: 0,
                list: [],
                classList: [],
                class_id: '1',

                //当前操作对象
                curId: 0,
                curIndex: -1,
                delVisible: false,
                editVisible: false,
                uploadUrl: uploadUrl,

                selects: [],
                progressPercent: 0,

            }
        },
        created() {
            this.$nextTick(() => {
                this.getData();
                this.getClass();
            })
        },

        methods: {
            //获取分类
            getClass() {
                this.$post_('album-class/list', {}, (res) => {
                    console.log(res);
                    if (res.code == '0') {
                        this.classList = res.data;
                    }
                });
            },
            getData() {
                this.ifload = true;
                let search = {class_id : this.class_id};
                let params = {
                    page: this.page,
                    page_size: this.pageSize,
                    search: JSON.stringify(search),
                }
                this.$post_('album-pic/list', params, (res) => {
                    console.log(res);
                    if (res.code == 0) {
                        this.list = res.data;
                        this.pages = Number(res.extend.pages);
                        this.totalNums = Number(res.extend.totalNums);
                        this.ifload = false;
                    }
                });
            },
            // 分页导航
            handleCurrentChange(val) {
                this.page = val;
                this.getData();
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.page = 1;
                this.getData();
            },

            handleRequest(data) {
                let formdata = new FormData()
                formdata.append('file', data.file)
                const config = {
                    onUploadProgress: progressEvent => {
                        // progressEvent.loaded:已上传文件大小
                        // progressEvent.total:被上传文件的总大小
                        console.log(progressEvent);
                        console.log(progressEvent.total);
                        console.log(progressEvent.loaded);
                        console.log(333);
                        this.progressPercent = Number((progressEvent.loaded / progressEvent.total * 100).toFixed(
                            2))
                        console.log(this.progressPercent);
                    }
                }
                this.$axios.post(uploadUrl, formdata, config).then(res => {
                    console.log(res);
                    console.log(data.file)
                    if (res.data.code == 0) {
                        this.showImg(res.data.data.url, data.file);
                        this.progressPercent = 0;
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            },

            //删除确认
            handleDel(index, row) {
                this.delVisible = true;
                this.curId = row.id;
                this.curIndex = index;
            },
            showImg(url, file) {
                if (url) {
                    //上传图片
                    let form = {
                        image_url: url,
                        class_id: this.class_id,
                        image_name: file.name
                    }
                    this.$post_('album-pic/edit', form, (res) => {
                        if (res.code == 0) {
                            this.getData();
                            if (this.list.length > this.page_size) {
                                this.list.splice(this.page_size, 1);
                            }
                        }
                    });
                }
            },

            //删除
            delData() {
                this.ifload = true;
                let param = {
                    id: this.curId
                };
                this.$post_('album-pic/del', param, (res) => {
                    console.log(res);
                    this.delVisible = false;
                    this.ifload = false;
                    if (res.code == '0') {
                        this.$message.success(res.msg);
                        this.list.splice(this.curIndex, 1);
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            },
            //选择
            selectImg(item) {
                if (this.showType == 0) return;
                if (!this.mult) {
                    this.$emit('selectImg', item.image_url);
                    return;
                }
                let i = this.selects.indexOf(item.image_url);
                if (i >= 0) {
                    this.selects.splice(i, 1);
                } else {
                    this.selects.push(item.image_url);
                }


            },
            sureSelect() {
                if (this.selects.length <= 0) return;
                this.$emit('selectImg', this.selects);
                this.selects = [];
            }
        }
    }
</script>

<style type="text/css" scoped>
    .el-col {
        overflow: hidden;
        margin-bottom: 20px;
        text-align: center;
        position: relative;
        cursor: pointer;
    }

    .el-col .name {
        display: block;
        overflow: hidden;
        font-size: 12px;
        text-align: center;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .el-col>>>.el-upload--picture-card {
        width: 100px;
        height: 100px;
        line-height: 100px;
    }

    .icon-ziyuan {
        display: none;
        position: absolute;
        right: 45%;
        top: 45px;
        color: red;
        font-size: 28px;
        /* background-color: #fff; */
    }



    .img-box {
        position: relative;
        border: 1px solid #eee;
        padding: 5px 0px;
    }
    .is-select {
        display: block;
        border: 1px solid blue;
    }
    .del {
        color: #000;
        position: absolute;
        top: 0px;
        right: 0px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        line-height: 30px;
        background-color: #ddd;
    }

    .name {
        line-height: 30px;
        font-size: 15px;
    }
</style>
